<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/Css/chatNav.css" />
    <script type="text/javascript" src="/JavaScripts/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/JavaScripts/Knockout.3.5.js"></script>
    <script type="text/javascript" src="/JavaScripts/WebChat/ChatNav.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="chatNav">
        <div style="width:100%;height: 60px;">
            <div data-bind="foreach:navItems" class="chat-nav">
                <span data-bind="class:className ,attr:{title:title,name:name} ,click:selected">
                <a data-bind="class:icon"></a>
                <span data-bind="text:badge ,style:{display:badgeDesplay}" class="webChat-nav-button-badge"></span>
                <div></div>
                </span>
            </div>
        </div>
        <hr>
        <div style="width:100%;height: 120px;">
            <div data-bind="foreach:navItems" class="chat-nav">
                <span data-bind="class:className ,attr:{title:title,name:name} ,click:selected">
                <a data-bind="class:icon"></a>
                <span data-bind="text:badge ,style:{display:badgeDesplay}" class="webChat-nav-button-badge"></span>
                <div></div>
                </span>
            </div>
        </div>
        <hr>

    </div>
    <div class="chatNav" style="width:100%;height: 80px;"></div>

    <script type="text/javascript">
        $(function() {

            var data = [{
                icon: "icon-chat",
                name: "tab1",
                title: "信息",
                badge: 10
            }, {
                icon: "icon-user",
                name: "tab2",
                title: "联系人",
                badge: 15
            }, {
                icon: "icon-cloudFile",
                name: "tab3",
                title: "云文件",
                badge: 9
            }];

            var viewModel = new function() {
                var self = this;
                this.selectdItem = ko.observable("");
                this.navItems = ko.observableArray([]);

                this.createItem = function(data) {
                    return new function() {
                        this.icon = data.icon;
                        this.name = data.name;
                        this.title = data.title;
                        this.badge = ko.observable(data.badge);

                        this.badgeDesplay = ko.pureComputed(function() {
                            return this.badge() === 0 ? "none" : "block";
                        }, this);

                        this.className = ko.pureComputed(function() {
                            return "nav-button" + ((this.name === self.selectdItem()) ? " nav-button-selected" : " ");
                        }, this);

                        this.selected = function() {
                            self.selectdItem(this.name);
                            this.badge(0);
                        };

                        this.isSelected = function() {
                            return self.selectdItem() == this.name;
                        }
                    }
                };

                this.loadData = function(data) {
                    self.navItems.removeAll();
                    $(data).each(function(index) {
                        var item = self.createItem(this);
                        self.navItems.push(item);
                        if (index === 0 && !self.selectdItem())
                            item.selected();
                    });
                };

                this.addNewItem = function(data) {
                    self.navItems.push(self.createItem(data));
                }

                this.getSelectItem = function() {
                    return self.navItems.destroy(function(someItem) {
                        return someItem.name === self.selectdItem();
                    });
                }
            }

            viewModel.loadData(data);

            ko.applyBindings(viewModel, $("#chatNav")[0]);

            $(".chatNav").webChatChatNav({
                data: data
            })
        });
    </script>
</body>

</html>